<template>
  <div class="box">
    <div class="flex box-tab">
      <div class="box-title">
        商品统计
      </div>
      <div class="tab">
        <span :class="{'active':type == 0}" @click="handleClickTab(0)">销售额</span>
        <span>|</span>
        <span :class="{'active':type != 0}" @click="handleClickTab(1)">金额</span>
      </div>
    </div>
    <div class="col">
      <minxin @changed="(val)=>{params.searchType = val}" />
    </div>
    <div class="box-list">
      <div class="box-item flex" v-for="(item,index) in goodsList" :key="index">
        <div class="goods">
          <div class="goods-title wes-2">{{item.goodsName}}</div>
          <div class="goods-num">销售数量：<span>{{item.num}}</span></div>
        </div>
        <div class="price">
          ￥{{item.price | unitPrice}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goodsStatistics } from "@/api/goods";
import storage from "@/utils/storage.js"; //缓存
import minxin from "./mixins.vue"; //公共minxin选择 时间组件 这里使用components来引入
export default {
  components: { minxin },
  data() {
    return {
      goodsList: [], //商品统计列表
      type: 0, // 0:销售额
      params: {
        // 请求参数
        searchType: "LAST_SEVEN",
        year: "",
        month: "",
        storeId: storage.getUserInfo().id || "",
        type: "NUM",
      },
    };
  },
  watch: {
    "params.searchType": {
      handler() {
        this.init();
      },
    },
  },
  methods: {
    //   初始化
    async init() {
      this.goodsList = [];
      let res = await goodsStatistics(this.params);
      if (res.data.success) {
        this.goodsList = res.data.result;
      }
    },
    // 点击tab搜索对应的内容 0为销售额
    handleClickTab(index) {
      this.type = index;
      index == 0 ? (this.params.type = "NUM") : (this.params.type = "PRICE");
      this.init();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
@import "./styles.scss";

.box-item {
  padding: 32rpx 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid #f6f6f6;
  > .goods {
    flex: 8;
    > .goods-title {
      font-size: 28rpx;
      margin: 10rpx 0;
    }
    > .goods-num {
      font-size: 24rpx;
      color: #999;
      > span {
        font-size: 24rpx;
        color: $light-color;
        font-weight: bold;
      }
    }
  }
  > .price {
    font-size: 26rpx;
    flex: 1;
    color: $light-color;
  }
}
.tab {
  font-size: 24rpx;
  color: #999;
  > span {
    margin: 0 7rpx;
  }
}
.active {
  color: #333;
  font-weight: bold;
}
.box-tab {
  justify-content: space-between;
  align-items: center;
}
.col {
  margin-top: 20rpx;
  display: flex;
  justify-content: flex-end;
}
</style>